iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 17
0

前天剛好遇到了Methods( https://ithelp.ithome.com.tw/articles/10206346 )簡單做了一下說明,當然這樣一定不夠的,經過了這段時間的學習,大家一定能深刻體會到邏輯運算被大量的使用(當然啦!工程師就是要寫程式嘛),我們不可能把它們全亂放在頁面裡,這樣也太難維護了!放在Computed或Methods都沒出錯啊,但其實是有差的喔!它們是什麼?該怎麼選用?今天就特別來詳細看看!

Computed

當我們寫入了大量「函數」,那當然要統一管理了!要放哪?「計算屬性Computed」就是專門讓你放運算式的好地方!Computed放的位置如下:

<script>
  export default {
    computed: {

    }
  }
</script>

computed會把之前的計算結果暫存起來,當使用到的data資料發生改變時,computed就會開始重新計算。

Methods

Methods用法跟Computed完全一樣,但兩者可是有差別的喔!Computed是跟據有使用到的data資料發生改變,才會重新計算,但Methods是只要有資料變動(觸發重新渲染時),就算它沒有用到這份資料都會重新運算,而這樣一來相對很吃效能,由其是其中一個函數需要大量的計算時!以上就是Computed與Methods最大的差異。

特別注意:

熟js的朋友一定很喜歡用箭頭函數,它是很方便的簡寫,但是在Methods裡不能用喔,因為箭頭函數綁定了父層的上下文,所以this不會像你想的一樣指向Vue,而是會變undefined。

依據以上分析結果做個簡單總結:

  • 沒有特別需要每次都運算函數,那就使用computed效能會比較好。
  • 需要每次更新全部函數運算結果,那就選用methods。

Getter

最後還有一個Getter,今天上班時剛好學到!它跟Computed一樣都是用來放運算函數的,但是很大的不同是,它是專門在store中整理、過濾state的資料,以上新手一定聽不懂,因為我兩星期前也一樣!現在就來解說一下,一個網站有很多資料都存在後台(會員、統計資料、資訊等…),而當我們要跟後台要資料(打api)時會有一個流程,很簡單的說就是從前台頁面「觸發要資料的需求」>「到store執行我們設定的actions(打api)」>「後台回資料回來」>「commit」>「mutations(設定資料寫入位置)」>「stat(存放打回來資料的地方)」>最後到前台頁面,目前先簡單知道有這個循環就好。
知道以上打api過程後,那當我們要整理打回來的資料,比如說我今天拿回9月份的統計資料,要用運算函數過濾出每個星期日的統計資料並呈現出來,這時就要在store中使用Getter來放「運算函數」整理、過濾state的資料的。

未來學Api就會實際用到它了,先聽聽就好!


上一篇
Vue[16]-事件處理v-on(二)
下一篇
Vue[18]-Watch
系列文
網頁設計靠 Vue.js 轉前端30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言